import React, { FC } from 'react';
import { Text, View, exitMiniProgram, getDevInfo } from '@ray-js/ray';
import { router } from 'ray';
import { IconFont, TouchableOpacity } from '@/components';

import styles from './index.module.less';

const HomeTopBar: FC = () => {
  const handleGoToSettings = () => {
    router.push('/settings');
  };

  const handleExitProgram = () => {
    exitMiniProgram();
  };

  return (
    <View className={styles.container}>
      <Text className={styles.title}>{getDevInfo().name}</Text>
      <View className={styles.toolsWrapper}>
        <TouchableOpacity className={styles.tool} onClick={handleGoToSettings}>
          <IconFont icon="more" />
        </TouchableOpacity>
        <TouchableOpacity className={styles.tool} onClick={handleExitProgram}>
          <IconFont icon="closeFill" />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default HomeTopBar;
